<template>
  <div class="tabbar" v-show="show">
    <!-- <router-link v-for="(item,index) in buttons" :to="item.route" :key="index">
      <i :class="item.fontName"></i>
      <p class="name">{{item.title}}</p>
    </router-link> -->
    <button v-for="(item,index) in buttons" :key="index" @click="clickAction" :class="{selsct:kind == (index+1)}" :id="index+1">
      <i :class="item.fontName"></i>
      <p class="name">{{item.title}}</p>
    </button>
    
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: 'TabBar',
  data: function () {
    return {
      buttons: this.options,
      kind:1
    }
  },
  computed:{
    show:function(){
      return this.$store.state.bar.tabBar.show;
    }
  },
  props: {
    options:{
      type:Array,
      require:true
    }
  },
  methods:{
    clickAction(event){
      // currentTarget指代当前相应事件的标签实例
      this.kind =event.currentTarget.getAttribute('id');
      let title="首页";
      // alert(this.kind);
      
      if (this.kind==1) {
        this.$router.replace({name:'Home'});
        
      }else if (this.kind==2) {
         this.$router.replace({name:'Find'});
         title="发现";
      } else if(this.kind==3) {
        this.$router.replace({name:'Order'});
        title="订单";
        }else{
          this.$router.replace({name:'Mine'});
          title="我的";
        }
        // 触发事件
      this.changeNav({title})
    },
    // changeNav(obj){
    //   this.$store.commit('changeNav',obj);
    // }
    ...mapMutations(['changeNav']),
  }
}
</script>

<style lang="less" scoped>
  .tabbar{
    position: fixed;
    padding:15px 0  ;
    left: 0;
    bottom: 0;
    right: 0;
  
    display: flex;
    justify-content: space-around;
    background:#f2f2f2;
  }
  .tabbar button{
     
      width: 50px;/*no*/
      text-decoration: none;
      text-align: center;
      border: 0;
      background: rgba(0,0,0,0,);
      outline: none;
 
    }

    .tabbar button .iconfont{
     font-size: 0.6rem;
    }
    .name{
      margin: 5px 0;
    }
    .selsct{
      color:red;
    }

  
  
</style>